<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            margin: 12px;
            text-align: center;
            width: fit-content;
            padding: 6px 12px;
            font-size: 18px;
            border-radius: 8px;
        }

        .gradient-text {
            /* 实现渐变文字 */
            color: transparent;
            background-clip: text;
            background-image: linear-gradient(45deg, #f07775, #68b7f0);
        }

        .border1 {
            border: 2px solid transparent;
            border-image: linear-gradient(45deg, #f07775, #68b7f0) 1;
        }

        .border2 {
            border: 2px solid transparent;
            /*<box>可能出现0次、1次或2次。如果出现1次，它同时设定background-origin和background-clip。
              如果出现2次，第一次的出现设置 background-origin，第二次的出现设置 background-clip。
              background-clip默认值为border-box。
              background-origin默认值为padding-box，与clip的不同之处是会以repeat的形式填充box之外部分
              部分（所以这里需要将底层背景origin设为border-box）。
            */
            background: linear-gradient(white, white) padding-box,
                linear-gradient(45deg, #f07775, #68b7f0) border-box;
        }


        .border3 {
            border: 2px solid transparent;
            /*清除边框部分的背景*/
            background: linear-gradient(white, white);
            background-clip: padding-box;
            position: relative;
        }

        .border3::before {
            content: "";
            position: absolute;
            inset: -2px -2px -2px -2px;
            border-radius: inherit;
            background: linear-gradient(45deg, #f07775, #68b7f0);
            z-index: -1;

        }

        .border4 {
            padding: 2px;
            background: linear-gradient(45deg, #f07775, #68b7f0);
        }

        .border4>.inner {
            background-color: white;
            padding: 6px 12px;
            border-radius: inherit;
        }
    </style>
</head>

<body>
    <!-- 方法一 -->
    <div class="box border1 gradient-text">border-image实现渐变边框及文字（不能实现圆角）</div>
    <!-- 方法二 -->
    <div class="box border2">background-origin和-clip实现渐变边框</div>
    <!-- 方法三 -->
    <div class="box border3">伪元素实现渐变边框</div>
    <!-- 方法四 -->
    <div class='box border4'>
        <div class='inner'>两个元素相叠实现渐变边框</div>
    </div>

    <!-- 方法二至四无法直接实现渐变文字，需要再嵌套一层，如：-->
    <div class="box border2">
        <div class="gradient-text">渐变背景及文字</div>
    </div>
</body>

</html>